<template>
	<scroll-view class="content" scroll-y="true" enable-back-to-top enable-flex="true" @scrolltolower="onReachBottom">
	<view>
		<view>
			<u-tabs-swiper ref="uTabs" :list="list" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750">
			</u-tabs-swiper>
			<view class="mainContent">
				<view class="orderBox" v-for="item in orderList" :key="item._id" @click="wxpayshow(item)">
					<view class="teacher">
						<view>
							<image :src="getgenderImage(item.teacher.gender)" mode="" class="tImg"></image>
							<text class="name">{{item.teacher.name}}</text>
						</view>
						<view class="price">实付款￥{{item.amount}}</view>
					</view>
					<!-- //老师概述 -->
					<view class="teacherIntro">
						{{item.teacher.resume}}
					</view>
					<!-- 状态 -->
					<view class="btns">{{getOrderStatus(item.status)}}</view>
				</view>
				<view class="no-more-data" v-show="noMoreData">没有更多数据了...</view>
			</view>
			<!-- <button @click="wxpay">微信支付</button> -->
		</view>
		<!-- 购买弹窗服务 -->
		<u-popup v-model="show" mode="bottom" border-radius="64" width="500rpx">
			<view class="showbox">
				<view class="teacherName">
					<text class="t1">{{showList.teacher.name}}</text>
					<text class="t2">￥</text>
					<text class="t3">{{showList.teacher.Price[0]}}-{{showList.teacher.Price[1]}}</text>
				</view>
				<view class="concat">
					<image :src="baseUrl + 'images/static/resume/Frame@2x.png'" mode="" class="phone"></image>
					<text class="phoneNumber">{{showList.account}}</text>
				</view>
				<!-- //订单信息 -->
				<view class="orderDetail">
					<view class="content1">
						<view class="t1">翻译形式</view>
						<view class="t2">{{showList.teacher.skills}}</view>
					</view>
					<view class="content1">
						<view class="t1">约定金额</view>
						<view class="t2">￥{{showList.amount}}</view>
					</view>
					<!-- 订单 -->
					<view class="orderInformation">
						<view class="txt">订单信息</view>
						<view class="number">{{showList._id}}</view>
					</view>
					<view class="orderInformation">
						<view class="txt">翻译编号</view>
						<view class="number">{{showList.teacher._id}}</view>
					</view>
				</view <!-- 支付方式 -->
				<view class="payWay">
					<radio-group @change="radioChange">
						<view class="wxpay">
							<view class="wx">
								<image :src="baseUrl + 'images/static/resume/Frame@2x(1).png'" mode="" class="wximg">
								</image>
								<text class="wxtxt">微信支付</text>
							</view>
							<view>
								<radio name='paymentMethod' value='wxpay' class="radio-btn" color='#00A0F7'
									checked="checked"></radio>
							</view>
						</view>
						<!-- 	<view class="wxpay">
							<view class="wx">
								<image :src="baseUrl + 'images/static/resume/Frame@2x(2).png'" mode="" class="wximg">
								</image>
								<text class="wxtxt">支付宝支付</text>
							</view>
							<view>
								<radio name='paymentMethod' value='zfbpay' class="radio-btn" color='#00A0F7'></radio>
							</view>
						</view> -->
					</radio-group>
				</view>


			</view>
			<!-- //立即支付 -->
			<view class="pay">
				<view class="paybtn"><u-button type="primary" @click="wxpay()">立即支付</u-button></view>
			</view>
		</u-popup>
	</view>
	</scroll-view>
</template>

<script>
	import {
		request,
		baseUrl
	} from '../../http/request.js';
	export default {
		data() {
			return {
				orderList: [],
				pageIndex: 1, // 初始页码
				pageSize: 10, // 每页数据量
				noMoreData: false,
				baseUrl: baseUrl,
				show: false,
				showList: [],
				list: [{
						name: '全部'
					},
					// {
					// 	name: '待付款'
					// }, {
					// 	name: '待确认'
					// },
					// {
					// 	name: '已完成'
					// }

				],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}

		},
		onShow() {
			this.getOrderList()
		},

		methods: {
			// 上拉加载更多事件
			onReachBottom() {
				this.getOrderList()
				},
			//获取订单列表
			getOrderList() {
			
				this.$http.orderHttp.getOrderList({
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					userId: uni.getStorageSync("_id")
				}).then(res => {
					console.log("订单列表", res)
					if (res.code == 200) {
						if (res.items.length > 0) {
							this.orderList = [...this.orderList, ...res.items];
							this.pageIndex++; // 更新页码
						} else {
							// 如果返回的数据为空，说明已经没有更多数据可加载
							this.noMoreData = true;
						}
						
					}
				}).catch(Error => {
					console.log(Error)
				})
			},
			getOrderStatus(status) {
				switch (status) {
					case "1":
						return "待付款"
					case '2':
						return "已付款";
					default:
						return "待付款";
				}
			},
			getgenderImage(gender) {
				switch (gender) {
					case '男':
						return this.baseUrl + 'images/static/home/man.png';
					case '女':
						return this.baseUrl + 'images/static/home/woman.png';
					default:
						return this.baseUrl + 'images/static/home/man.png';
				}
			},
			// tabs通知swiper切换
			tabsChange(index) {
				console.log("154", index)
				this.current = index;
				this.swiperCurrent = index;
			},
			wxpayshow(item) {
				this.showList = item
				if (item.status == 1) {
					this.show = true
				}
				

			},
			radioChange(e) {
				console.log('选中的那个', e.detail.value);
			},
			//微信支付demo
			wxpay() {
				const item = this.showList
				if (item.status == 1) {
					this.$http.wxpayHttp.getprepay({
						money: item.amount * 100,
						openid: uni.getStorageSync("openid"),
						description: item.teacher.name
					}).then(res => {
						console.log("res", res)
						if (res.code == 200) {
							const data = res.data
							console.log("123")
							console.log("888.", data.timeStamp, data.nonceStr, data.package, data.signType, data
								.paySign)
							uni.requestPayment({
								provider: 'wxpay',
								// 'timeStamp':`"${data.timestamp}"`,
								// 'nonceStr':`"${data.nonce_str}"`,
								// 'package':`"${data.package}"`,
								// 'signType':`"${data.signType}"`,res
								// 'paySign':`"${data.paySign}"` ,
								// 'timeStamp':res.timeStamp,
								// 'nonceStr':res.nonceStr,
								// 'package':res.package,
								//  'signType':res.signType,
								// 'paySign':res.paySign,
								'timeStamp': data.timeStamp,
								'nonceStr': data.nonceStr,
								'package': data.package,
								'signType': data.signType,
								'paySign': data.paySign,
								success:(res)=> {
									this.$http.orderHttp.payStatus({
											nonceStr:data.nonceStr,
											status:2,
											_id:item._id
										})
									uni.showModal({
										title: '提示',
										content: '支付成功!',
										showCancel: false,
										success: function(res) {
											if (res.confirm) {
												// 支付成功后的操作

												uni.switchTab({
													url: "/pages/Home/Home"
												})
											}
										}
									})
								},
								fail:(err)=> {
									
									console.log("错误信息", err)
									uni.showModal({
										title: '提示',
										content: '支付失败，请稍后重试',
										showCancel: false
									})
								}
							})
						}
					}).catch(err => {
						uni.showModal({
							title: '提示',
							content: '获取预支付信息失败，请稍后重试',
							showCancel: false
						})
					})
				}

			}

		}
	}
</script>

<style lang="scss">
	.mainContent {
		width: 100%;
		// height: 100vh;
		background-color: #F6F6F6;
		padding: 32rpx 32rpx;

		.orderBox {
			width: 686rpx;
			height: 334rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 24rpx 24rpx;
			margin-bottom: 24rpx;

			.teacher {
				display: flex;
				justify-content: space-between;

				.tImg {
					width: 40rpx;
					height: 40rpx;
					vertical-align: middle;
					margin-right: 8rpx;
				}

				.name {
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #333333;
				}

				.price {
					font-weight: 500;
					font-size: 28rpx;
					color: #F7A300;

				}
			}

			.teacherIntro {
				height: auto;
				/* 设置高度自适应内容 */
				display: -webkit-box;
				-webkit-line-clamp: 3;
				/* 设置显示的行数 */
				-webkit-box-orient: vertical;
				overflow: hidden;
				margin: 24rpx;
				font-size: 28rpx;
				color: #666666;
			}


			.btns {

				padding: 12rpx 24rpx;
				width: 200rpx;
				height: 64rpx;
				margin-left: 400rpx;
				margin-top: 20rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border: 1rpx solid #999999;
				text-align: center;

			}
		}
	}

	//支付弹出层
	.showbox {
		width: 100%;

		padding: 48rpx 32rpx;
		background-color: #FBFBFB;

		.teacherName {
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 34rpx;
				color: #000000;
			}

			.t2 {
				font-size: 20rpx;
				color: #00A0F7;
				margin-left: 16rpx;
			}

			.t3 {
				font-size: 32rpx;
				color: #00A0F7;

			}
		}

		.concat {
			width: 686rpx;
			height: 102rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 26rpx 0rpx;
			line-height: 102rpx;

			.phone {
				width: 28rpx;
				height: 28rpx;
				margin-left: 42rpx;
			}

			.phoneNumber {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 30rpx;
				color: #333333;
			}
		}

		.orderDetail {
			width: 686rpx;
			height: 540rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 24rpx 0rpx;
			padding: 32rpx 32rpx;

			.content1 {
				width: 100%;
				margin-bottom: 48rpx;

				.t1 {
					width: 120rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 30rpx;
					color: #333333;
					margin-bottom: 16rpx;
				}

				.t2 {
					width: 144rpx;
					height: 66rpx;
					background: rgba(0, 160, 247, 0.05);
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #00A0F7;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #00A0F7;
					line-height: 66rpx;
					text-align: center;
					overflow: hidden;
				}
			}

			.orderInformation {
				display: flex;
				justify-content: space-between;
				margin-bottom: 48rpx;

				.txt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #333333;
				}

				.number {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;

				}
			}
		}

		.payWay {
			width: 686rpx;
			height: 204rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;

			.wxpay {
				display: flex;
				padding: 36rpx 24rpx;
				box-sizing: border-box;
				height: 102rpx;
				border-bottom: 1rpx solid #F2F2F2;
				justify-content: space-between;

				.wximg {
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;

				}

				.wxtxt {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					margin-left: 8rpx;
				}

			}

		}

	}

	.pay {
		width: 100%;
		height: 128rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;

		.paybtn {
			width: 684rpx;
			height: 96rpx;
			margin: 0 auto;
		}
	}
	.no-more-data {
		text-align: center;
		font-size: 28rpx;
		color: #666666;
		margin-bottom: 20rpx;
	}
</style>